<template>
    <div class="container">
      <div class="good" v-for="item in items" :key="item.id" @click="detail(item.id)" v-show="items.length">
        <img v-lazy="item.pic" alt="">
        <span class="title">{{item.name}}</span>
        <span class="comment">{{item.characteristic?item.characteristic:'暂无描述'}}</span>
        <span class="price">
          <i>{{'￥'+item.minPrice}}</i><i class="smart">.00</i>
        </span>
        <span class="coustomer">
          <i>5000+条评论</i>
          <i class="like">看相似</i>
        </span>
      </div>
      <div v-show="!items.length" class="noresult">
        <span>暂无匹配结果</span>
      </div>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  mounted () {
    bus.$on('abc', function () {
      console.log('兄弟你来找我了？')
    })
  },
  methods: {
    detail (n) {
      this.$emit('godetail', n)
    }
  }

}
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-flow: wrap;
  .good{
    display: flex;
    padding: 5px;
    width: 50%;
    flex-direction: column;
    img{
      border-radius: 10px;
    }
    .title{
      font-size: 20px;
      font-weight: 550;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    span{
      padding: 0 10px;
      font-size: 14px;
      text-align: left;
    }
    .price{
        color: red;
        font-size: 16px;
        .smart{
          font-size: 12px;
        }
    }
    .comment{
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .coustomer{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .like{
        background-color: #9999;
        border-radius: 6px;
        text-decoration: none;
        font-style: normal;
        padding: 0 4px;
      }
    }
  }
}
.noresult{
  display: flex;
  padding-top: 1rem;
  flex: 1;
  justify-content: center;
  font-size: 20px;
}

</style>
